﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div v-loading.lock = "loading" element-loading-text = "拼命加载中" element-loading-spinner = "el-icon-loading" class = "page_secondMainContent clear">
      <!-- 左侧表的树状列表 -->
      <div class = "page_leftContent">
        <div class = "page_leftSearchContent clear">
          <el-button  type = "primary" @click = 'getTableJson'>指令执行</el-button>
          <div class = "page_leftSearchInput">
            <el-input  placeholder = "输入表名称" v-model = "filterText" prefix-icon = "el-icon-search" clearable></el-input>
          </div>
        </div>
        <div class = 'main_tree'>
          <el-tree :data = 'getData' node-key = 'treeId' :check-on-click-node = "true" :check-strictly = 'true' accordion @node-click = "handleNodeClick"
          :filter-node-method = "filterNode" :indent = 15 :props = "defaultProps" ref='myTree' show-checkbox
          @check-change = 'handleCheckChange' :default-expanded-keys = 'defaultExpanded' :default-checked-keys = 'defaultChecked'>
            <span slot-scope='{node, data}' class = 'page_secondLevel'>
              <span v-if = 'data.hadOperation' class = "page_treeBtns">
                <el-button :disabled = "!data.is_created || operationType === 'add' || operationType === 'edit'"
                type='text' size = 'mini' title = '删除数据' @click.stop = 'handleDeleteTable(data)'><i class = 'iconfont icon-shanchu'></i>数据</el-button>
              </span>
              <span v-if = '!data.hadOperation' :title = "node.label">{{node.label}}</span>
              <span v-if = "data.hadOperation" class = "page_treeLabel" :title = "data.metadesc + '(' + data.metaname + ')'">{{data.metadesc}}({{data.metaname}})</span>
            </span>
          </el-tree>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <div class="page_rightContent" v-if = 'hadCreated.length'>
        <!-- 检索部分 -->
        <div class='page_searchContent'>
          <el-input placeholder = "请输入关键字进行数据过滤" v-model = 'searchKey' prefix-icon = "el-icon-search" clearable></el-input>
        </div>
        <!-- 表格部分 -->
        <div class = 'page_tableContent'>
          <el-table :data = 'table.tableData' style = 'width:100%;' stripe border empty-text = '暂无数据，请点击右上方按钮添加'>
            <el-table-column min-width = "180" align = 'center' v-for = 'item in table.tableColumn' :key = 'item.indexName'
            :label = 'item.text' :render-header = "!item.is_allow_empty ? handelHelpKey : handelHelp">
              <template slot-scope = 'scope'>
                <span v-if = "item.ui_type === 'RichText' || item.ui_type === 'MD' || item.ui_type === 'JSONEditor'" @click = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(item, scope.row, scope.$index) : (scope.row.newData === 'newData' ? addTableCloumn(item, scope.row, scope.$index) : editTableCloumn(item, scope.row, scope.$index))" class = "editStatus">......</span>
                <span v-else-if = "item.ui_type === 'Wiki'" class = "editStatus" @click = 'setWikiContent(item, scope.row, scope.$index)'>......</span>
                <span v-else-if = "item.ui_type === 'File'" @click = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(item, scope.row, scope.$index) : (scope.row.newData === 'newData' ? addTableCloumn(item, scope.row, scope.$index) : editTableCloumn(item, scope.row, scope.$index))" class = "editStatus"><i class='el-icon-document'></i></span>
                <span v-else-if = "item.ui_type === 'Picture'" @click = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(item, scope.row, scope.$index) : (scope.row.newData === 'newData' ? addTableCloumn(item, scope.row, scope.$index) : editTableCloumn(item, scope.row, scope.$index))" class = "editStatus"><i class='el-icon-picture'></i></span>
                <span v-else @click = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(item, scope.row, scope.$index) : (scope.row.newData === 'newData' ? addTableCloumn(item, scope.row, scope.$index) : editTableCloumn(item, scope.row, scope.$index))" class = "editStatus">{{scope.row[item.indexName]}}</span>
              </template>
            </el-table-column>
            <el-table-column label = "操作" align = "center" min-width = '60'>
              <template slot-scope = "scope">
                <el-button type = 'text' :disabled = "operationType === 'edit' || (operationType === 'add' && scope.row.newData !== 'newData')" @click = "handleSingleDelete(scope.row, scope.$index)"><i class = 'iconfont icon-shanchu'></i>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部按钮和页码部分 -->
        <div class = 'page_bottomContent'>
          <div class = 'page_btnsContent'>
            <el-button type = "primary" @click = 'searchData' v-show = "operationType !== 'edit' && operationType !== 'add'">检索数据</el-button>
            <el-button type = "primary" @click = 'addData' v-show = "operationType !== 'edit'">添加数据</el-button>
            <el-button v-show = "operationType !== 'add' && operationType !== 'edit'" type = "primary" @click = 'handleEdit'>编辑数据</el-button>
            <el-button type = "primary" @click = 'addMutilData' v-show = "operationType !== 'edit' && operationType !== 'add'">导入数据</el-button>
            <el-button v-show = "operationType === 'add' || operationType === 'edit'" @click = "resetForm()" type = 'primary'>取&nbsp;&nbsp;&nbsp;&nbsp;消</el-button>
            <el-button v-show = "operationType === 'add' || operationType === 'edit'" type = "primary" @click = "submitForm (operationType)">确&nbsp;&nbsp;&nbsp;&nbsp;定</el-button>
          </div>
          <div class = 'page_paginationContent'>
            <el-pagination
            background v-if = "mode === 'Normal'"
            @size-change = "handleSizeChange"
            @current-change = "handleCurrentChange"
            :current-page.sync = "currentPage"
            :page-size = 'pageSize'
            :pager-count = "5"
            :page-sizes = "[10, 25, 50, 100]"
            layout = "total, sizes, prev, pager, next"
            :total = 'totalLength'>
            </el-pagination>
          </div>
        </div>
      </div>
      <div v-if = '!hadCreated.length' class = "page_rightContent">
        该元素表中没有已经创建好的表，暂时无法获取其数据内容，请在元数据结构维护中进行表的创建
      </div>
    </div>
    <!-- 编辑某个字段时的弹窗 -->
    <Edit-Content :showDialog = 'showDialog' :editInfo = 'editInfo' @giveUp = 'showDialog=false' @sureEdit = 'sureEdit'></Edit-Content>
    <!-- 检索数据的弹窗 -->
    <Get-Search :showSearchData = 'showSearchData' :cloumnList = 'table.tableColumn' :searchInfo = 'searchInfo' :mode = 'mode'
    @giveUpSearch = 'showSearchData=false' @sureSearch = 'sureSearch'></Get-Search>
    <!-- 设置wiki弹窗部分 -->
    <el-dialog :title = 'settingWikiDialog.title' :visible.sync = 'settingWikiDialog.dialogVisible' :style = "{opacity: settingWikiDialog.opacity}" :modal = 'settingWikiDialog.modal'
    width = '95%' class = 'main_dialog md_dialog' :class = "settingWikiDialog.modal ? '' : 'md_visiableFrame'" :close-on-click-modal = "false" :close-on-press-escape = "false">
      <div>
        <iframe :src = "settingWikiDialog.url" ref = 'myWikiIframe' width = '100%' :height = 'iframeHeight' frameborder = "0"></iframe>
      </div>
    </el-dialog>
    <!-- 导入数据的弹窗 -->
    <Add-Mutil-Data :showDialog = 'showAddMutilDataDialog' :metauid = 'checkedId.metauid' :tableColumn = 'table.tableColumn'
    @operationSuccess = 'operationSuccess' @operationReset = 'showAddMutilDataDialog = false'></Add-Mutil-Data>
    <!-- json编辑的弹窗 -->
    <el-dialog title = '输入需要查询的参数' :visible.sync = 'showJsonDialog' width = '90%'
    :before-close = 'closeJsonDialog' append-to-body :close-on-click-modal = 'false' :close-on-press-escape = 'false'
    class = 'md_dialog'>
      <el-form ref = 'ruleForm' v-loading = 'jsonLoading' element-loading-text = '数据获取中...' label-width = "100px">
        <el-form-item label = '系统运维密钥'>
          <el-input placeholder="请输入系统运维密钥" v-model = 'jsonHeaderValue'></el-input>
        </el-form-item>
        <el-row>
          <el-col :span = '9'>
            <el-form-item label = "请求参数：">
              <Editor-Md-Json ref = "myJSONEditor" :disabled = "false" editId = 'editId_editJson' showId = 'editId_showJson'
              :defaultValue.sync = 'jsonDialogValue' :showMDJson = 'showJsonDialog'></Editor-Md-Json>
            </el-form-item>
          </el-col>
          <el-col :span = '12' :offset = '1'>
            <el-form-item label = "返回结果：">
              <Editor-Md-Json :disabled = "false" editId = 'editId_editJson_show' showId = 'editId_showJson_show' :updateJson = 'jsonShowValue'
              :defaultValue.sync = 'jsonDialogValueOut' :showMDJson = 'showJsonDialog'></Editor-Md-Json>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type = "info" @click = "closeJsonDialog">取 消</el-button>
          <el-button type = "primary" @click = "handleJsonSubmit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script src='./maintainT.js'></script>

<style>
.md_visiableFrame,
.md_visiableFrame .el-dialog,
.md_visiableFrame .el-dialog .el-el-dialog__header,
.md_visiableFrame .el-dialog .el-dialog__body{
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
</style>
